<template>
	<view class="detail-wrap">
		<scroll-view scroll-y="true" @scrolltolower="loadMore" enable-back-to-top class="scroll-box">
			<view class="info-box">
				<!--用户信息-->
				<view class="user-item">
					<view class="user-item">
						<image class="user-avatar" :src="$util.img(postDetail.member_headimg)"></image>
						<view class="user-item-user">
							<text class="user-name">{{ postDetail.member_name }}</text>
						</view>
						<u-button v-show="whetherFollow =='1'" :custom-style="customFollow" size="mini"
							style="float:right;font-size: 14px;" @click="cancelFollow">已关注</u-button>
						<u-button v-show="whetherFollow=='0'" :custom-style="customFollow" size="mini"
							style="float:right;font-size: 14px;" @click="follow">关注</u-button>
					</view>
				</view>
				<!--发布时间-->
				<view class="time u-tips-color u-m-t-20">
					发布时间：{{ $util.timeStampTurnTime(postDetail.create_time, 'time') }}
				</view>
				<!--帖子内容-->
				<view class="post-title">{{ postDetail.title }}</view>
				<rich-text class="post-text" @longpress="onCopy" :nodes="postDetail.content"></rich-text>
				<!-- 图片 -->
				<block v-if="postDetail.type == 1 && postDetail.media[0]!==''">
					<!--一张图片-->
					<block v-if="postDetail.media.length == 1">
						<image class="img-style-1" @click="previewMedia(index)" mode="aspectFill"
							:data-current="postDetail.media[0]" :data-image="postDetail.media"
							:src="$util.img(postDetail.media[0])">
						</image>
					</block>
					<!--二张图片-->
					<block v-if="postDetail.media.length == 2">
						<view class="img-style-2">
							<image v-for="(mediaItem, index2) in postDetail.media" :key="index2"
								@click="previewMedia(index)" mode="aspectFill" :data-current="mediaItem"
								:data-image="postDetail.media" :src="$util.img(mediaItem)">
							</image>
						</view>
					</block>
					<!--三张以上图片-->
					<block v-if="postDetail.media.length > 2">
						<view class="img-style-3">
							<image v-for="(mediaItem, index2) in postDetail.media" :key="index2"
								@click="previewMedia(index2)" mode="aspectFill" :data-current="mediaItem"
								:data-image="postDetail.media" :src="$util.img(mediaItem)">
							</image>
						</view>
					</block>
				</block>
				<!--播放视频-->
				<view v-if="postDetail.video">
					<video :src="$util.img(postDetail.video)" controls objectFit="cover"></video>
				</view>

				<!--点赞-->
				<view class="u-m-t-30 u-m-b-30 u-flex">
					<view class="like">
						<u-icon name="heart" size="36" @click="giveLike" v-if="!giveLikeIdent"></u-icon>
						<u-icon name="heart-fill" size="36" @click="giveLike" v-if="giveLikeIdent"></u-icon>
					</view>
					<view class="share">
						<u-button :custom-style="customStyle" size="mini" open-type="share">
							<u-icon name="share" size="36"></u-icon>
						</u-button>
					</view>
				</view>
				
				<!--发布评论-->
				<u-gap height="20" bg-color="#f4f6f8"></u-gap>
				<view class="u-bg-white u-p-30" >
					<view class="u-p-b-10 u-tips-color">发表评论</view>
					<view class="">
						<u-input v-model="form.content" type="textarea" placeholder="请输入评论内容" :border="false" />
					</view>
					<view class="u-flex u-row-center">
						<u-button hover-class="none" type="primary" size="medium"
							:custom-style="customComment" 
							@click="addComment">
							立即评论
						</u-button>
					</view>
				</view>
				<!--评论列表-->
				<view class="comment-box">
					<view class="title u-tips-color">评论（{{ commentList.length }}）</view>
					<!--一级评论-->
					<view v-for="(item, index) in commentList" :key="index">
						<view class="comment-item">
							<image class="avatar" :src="$util.img(item.member_headimg)"></image>
							<view class="c-content" @click="onReply(item)">
								<view class="user">
									<text>{{item.member_name}}</text>
								</view>
								<text class="c-txt">{{ item.content }}</text>
							</view>
						</view>
						<!--二级评论-->
						<view class="sub-comment-item" v-for="(item2, index2) in item.children" :key="item2.id">
							<view class="user">
								<u-avatar class="avatar" :size="40" :src="$util.img(item.member_headimg)"></u-avatar>
								<view class="u-head">
									<text>{{ item2.member_name }}:</text>
									<text class="u-m-l-20">{{item2.content}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if="commentList.length" height="80rpx" :status="loadStatus" icon-type="flower"
						color="#ccc" />
				</view>
				<!--用户登录组件-->
				<ns-login ref="login"></ns-login>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import htmlParser from '@/common/js/html-parser';
	import globalConfig from '@/common/js/golbalConfig.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		Weixin
	} from '@/common/js/wx-jssdk.js';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				postId: null,
				memberName: "",
				memberNeadimg: "",
				memberId: "",
				postDetail: {},
				commentList: [],
				whetherFollow: 0,
				placeholder: '说点什么...',
				token: "",
				preview: 0,
				form: {
					pid: 0,
					type: 1,
					content: '',
					to_uid: '',
				},
				customStyle: {
					marginTop: '-20rpx'
				},
				customComment: {
					background:'#333'
				},
				customFollow: {
					background: '#333',
					color: '#FFF'
				},
				
				focus: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 1,
				currentPage: 1,
				iconType: 'flower',
				isEmpty: false,
				giveLikeIdent: false,
				giveLikeFlag: false,
				preview: 0,
			};
		},

		onLoad(options) {
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			this.preview = options.preview || 0;
			if (options.source_member) uni.setStorageSync('source_member', options.source_member);
			if (options.post_id) {
				this.postId = options.post_id;
				this.getPostDetail();
			} else {
				this.$util.redirectTo('/otherpages/social/index', {}, 'redirectTo');
			}
			this.getWhetherFollow();
			this.getUserInfo();
			this.getCommentList();
		},
		async onShow() {
			// 刷新多语言
			this.$langConfig.refresh();

			//登录后查询
			this.token = uni.getStorageSync('token');
			//登录后查询
			if (uni.getStorageSync('token')) {
				this.isDianzan();
				this.getUserInfo();
			}

		},
		mixins: [globalConfig],
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getCommentList();
			}
		},
		methods: {
			//笔记详情
			getPostDetail() {
				this.$api.sendRequest({
					url: '/social/api/social/detail',
					data: {
						post_id: this.postId
					},
					success: res => {
						if (res.code == 0) {
							this.postDetail = res.data;
							//记录关注状态
							if (this.token != '' && this.preview == 0) {
								this.getWhetherFollow();
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//检测是否关注
			getWhetherFollow() {
				this.$api.sendRequest({
					url: "/social/api/social/isfollow",
					data: {
						followed_id: this.postDetail.member_id
					},
					success: res => {
						this.whetherFollow = res.data;
					}
				});
			},
			//关注
			follow() {
				this.$api.sendRequest({
					url: "/social/api/social/follow",
					data: {
						member_id: this.memberId,
						followed_id: this.postDetail.member_id,
						post_id: this.postId,
						type: this.form.type

					},
					success: res => {
						if (res.code == 0) {
							var data = res.data;
							if (data > 0) {
								this.whetherFollow = 1;
							}

						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					}
				});
			},
			//已关注取消关注
			cancelFollow() {
				this.$api.sendRequest({
					url: "/social/api/social/deletefollow",
					data: {
						followed_id: this.postDetail.member_id
					},
					success: res => {

						var data = res.data;
						if (data > 0) {
							this.whetherFollow = 0;
						}
					}
				});
			},
			//获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							this.memberName = res.data.nickname;
							this.memberNeadimg = res.data.headimg;
							this.memberId = res.data.member_id;
						} else {
							this.$util.showToast({
								title: res.message
							})
						}
					}
				});
			},
			onBlur() {
				this.placeholder = '说点什么...';
				this.focus = false;
				this.form.pid = 0;
			},
			//添加评论
			addComment() {
				let data = {
					post_id: this.postId,
					content: this.form.content,
					member_name: this.memberName,
					member_headimg: this.memberNeadimg,
					member_id: this.memberId,
					pid: this.form.pid,
					to_uid: this.form.to_uid
				};
				this.$api.sendRequest({
					url: '/social/api/social/pinlun',
					data: data,
					success: res => {
						if (res.code == 0) {
							this.$util.showToast({
								title: "评论发布成功"
							});
							setTimeout(() => {
								this.$util.redirectTo('/newpages/social/detail', {
									post_id: this.postId
								});
							}, 100);
						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					},
					fail: res => {
						this.flag = false;
					}
				});
			},
			//评论回复
			onReply(e) {
				this.placeholder = '回复：' + e.member_name;
				this.focus = true;
				this.form.pid = e.comment_id;
				this.form.to_uid = e.member_id;
				this.form.post_id = this.postId;
			},
			//获取评论列表
			getCommentList() {
				this.$api.sendRequest({
					url: '/social/api/social/pinlunlist',
					data: {
						page: this.currentPage,
						post_id: this.postId
					},
					success: res => {
						if (res.code == 0) {
							this.commentList = res.data.data;
							this.isEmpty = !this.commentList.length;
							this.lastPage = res.data.last_page;
							this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
						} else {
							this.$util.showToast({
								title: res.message
							});
						}

						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//记载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getCommentList();
				}
			},
			/* 点赞 */
			giveLike() {
				if (!uni.getStorageSync('token')) {
					this.$refs.login.open('/pages/index/index/index');
					return;
				}

				if (this.giveLikeFlag) return false;
				this.giveLikeFlag = true;

				var url = this.giveLikeIdent ? '/social/api/record/delete' : '/social/api/record/add';
				this.$api.sendRequest({
					url: url,
					data: {
						post_id: this.postId
					},
					success: res => {
						this.giveLikeFlag = false;
						if (res.code == 0 && res.data > 0) {
							this.postDetail.dianzan_num = this.giveLikeIdent ? this.postDetail
								.dianzan_num - 1 : this.postDetail.dianzan_num + 1;
							this.giveLikeIdent = !this.giveLikeIdent;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			/* 检测是否点赞 */
			isDianzan() {
				this.$api.sendRequest({
					url: '/social/api/record/isDianzan',
					data: {
						post_id: this.postId
					},
					success: res => {
						if (res.code == 0) {
							this.giveLikeIdent = res.data == 1 ? true : false;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			//单图预览
			previewMedia(index) {
				var paths = [];
				for (let i = 0; i < this.postDetail.media.length; i++) {
					paths.push(this.$util.img(this.postDetail.media[i]))
				}
				uni.previewImage({
					current: index,
					urls: paths,
				});
			},

			//多图预览
			previewMedia(index2) {
				console.log(index2);
				var paths = [];
				console.log(paths);
				for (let i = 0; i < this.postDetail.media.length; i++) {
					paths.push(this.$util.img(this.postDetail.media[i]))
				}
				uni.previewImage({
					current: index2,
					urls: paths,
				});
			}




		}
	};
</script>

<style lang="scss" scoped>
	.detail-wrap {
		background-color: #FFFFFF;
		height: 100vh;
	}
	.scroll-box {
		height: 100vh !important;
	}

	.info-box {
		padding: 25rpx;
		background-color: #ffffff;
		height: 100vh;
	}

	//关注
	.user-item {
		display: flex;

		.user-item-user {
			flex: 1;

			.cxplain {
				font-size: 12px;
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}

		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			float: left;
			margin-right: 10rpx;
			border-radius: 50%;
		}
	}

	//文章内容
	.post-title {
		margin: 20rpx 0;
	}

	.img-style-1 {
		display: block;
		width: 100%;
		max-height: 600rpx;
		border-radius: 5px;
	}

	.img-style-2 {
		display: flex;
	}

	.img-style-2 image {
		margin: 5rpx;
		border-radius: 5px;
		width: 100%;
		height: 294rpx;
	}

	.img-style-3 {
		display: flex;
		flex-wrap: wrap;
	}

	.img-style-3 image {
		width: 31.3%;
		height: 200rpx;
		margin: 1%;
		border-radius: 5px;
	}

	//评论列表
	.comment-box {
		background-color: #ffffff;
		margin-top: 20rpx;
		margin-bottom: 20px;
		padding: 20rpx;
	}

	.comment-box>.title {
		margin-bottom: 20rpx;
	}

	.comment-item {
		display: flex;
		padding: 20rpx;

		&:active {
			background-color: #F5F5F5;
		}

		.c-content {
			display: flex;
			flex-direction: column;
			flex: 1;

			.time {
				color: #999;
				font-size: 10px;
			}

			.user {
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 1px solid #dd524d;
			margin-right: 20rpx;
		}
	}

	.sub-comment-item {
		margin-left: 100rpx;
		padding: 20rpx;

		&:active {
			background-color: #F5F5F5;
		}

		.user {
			display: flex;
			align-items: center;

			.name {
				color: #616161;
			}

			.avatar {
				margin-right: 10rpx;
			}

			.u-head {
				flex: 1;
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.reply {
			.time {
				margin-left: auto;
				font-size: 20rpx;
				color: #999;
			}

			.name {
				display: inline-block;
				color: #2b85e4;
				font-weight: 600;
			}
		}
	}


	//发布评论
	.comment-tool {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		z-index: 999;
	}

	.comment-tool textarea {
		background-color: #f5f5f5;
		padding: 20rpx;
		border-radius: 10rpx;
		min-height: 40rpx;
	}

	video {
		width: 100% !important;
	}
</style>
